<template>
  <a-tabs
    :default-active-key="activeKey"
    :size="config.size"
    :type="config.type"
    :position="config.position"
    :trigger="config.trigger"
    :justify="config.justify"
    :animation="config.animation"
    :hide-content="config.hideContent"
    :header-padding="config.headerPadding"
    @change="tabChange"
  >
    <template v-for="(tab, index) in item.formList" :key="index">
      <tab-container
        :id="tab.id"
        v-model:list="tab.formList"
        v-model:model="formModel"
        :item="tab"
        :item-config="tab.itemConfig"
        :config="tab.config"
      />
    </template>
  </a-tabs>
</template>

<script lang="ts" setup>
import { ref, defineModel, defineProps, watch, inject } from 'vue';
import TabContainer from '@/components/form-render/container-item/tab-container.vue';
import { cloneDeep, values } from 'lodash';

const formModel = defineModel();

const props = defineProps({
  id: {
    type: String,
    default: () => ''
  },
  item: {
    type: Object,
    default: () => {
    }
  },
  itemConfig: {
    type: Object,
    default: () => {
    }
  },
  config: {
    type: Object,
    default: () => {
    }
  }
});

const activeKey = ref(cloneDeep(props.config.defaultActiveKey ? props.config.defaultActiveKey : props.item.formList[0].id));

const formInstance = inject('formInstance');

const tabChange = (value: any) => {
  if (props.config.onChangeFunction) {
    try {
      const callBack = new Function('value', props.config.onChangeFunction);
      callBack.call(formInstance, value);
    } catch (e) {
      console.error(e);
    }
  }
};
</script>

<script lang="ts">
export default {
  name: 'TabsContainerRender'
};
</script>

<style lang="less" scoped>
</style>